<template>
  <div>
    <h3>关注的榜单</h3>
    <a href="javascript:;" @click="xingebang">新歌榜</a>
    <a href="javascript:;" @click="regebang">热歌榜</a>
    <h3>关注的歌手</h3>
    <a href="javascript:;" @click="zhanghuimei">张惠妹</a>
    <a href="javascript:;" @click="xuezhiqian">薛之谦</a>
  </div>
</template>

<script>
export default {
    name: 'FollowPage',
    methods: {
        xingebang(){
            this.$router.push(`/discover/toplist/新歌榜`)
        },
        regebang() {
            //this.$router.push(`/discover/toplist/热歌榜`)
            this.$router.push({
                name: 'phb',// 路由规则的name值
                params: { // 传递的动态路由参数
                    name: '热歌榜'
                }
            })
        },
        zhanghuimei() {
        // 写法三：使用path跳转
      this.$router.push({
        path: '/discover/artlist',
        query: {
          id: 1
        }
      })
    } ,
    xuezhiqian() {
        this.$router.push({
            path: '/discover/artlist',
            query: {
                id: 4
            }
        })
    }
    }
    
}
</script>

<style lang="less" scoped>
div {
  padding: 15px;
}

h3 {
  margin: 0;
}

a {
  display: inline-block;
  margin: 10px;
  text-decoration: none;
  color: #424242;
}
</style>